<template>
  <a-modal
    :visible="options.visible"
    :title="getModalData.title"
    :footer="null"
    :width="1000"
    destroyOnClose
    @cancel="handelCancel"
  >
    <div>
      <a-table
        :columns="getModalData.tableHead"
        :data-source="getModalData.tableData"
        :pagination="{ pageSize: 5 }"
        :rowKey="(key)=>JSON.stringify(key)"
      >
        <template v-slot:goodImgUrl="{ text }">
          <img :src="text" style="width: 150px; height: auto" alt="" />
        </template>
        <template v-slot:option="{ record }">
          <a class="alink" @click="selectItem(record)">选择</a>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang='ts'>
import { defineComponent, computed, PropType } from "vue";
import { LinkType } from "@/utils/type";
import { ILinkParams } from "./dropdown.vue";
import { goodsList, couponList, pageList } from "@/utils/mock";

/** 微商品表头 */
const goodsThead = [
  { title: "商品id", dataIndex: "goodId", key: "goodId" },
  {
    title: "商品图片",
    dataIndex: "goodImgUrl",
    key: "goodImgUrl",
    slots: { customRender: "goodImgUrl" },
  },
  { title: "商品名称", dataIndex: "goodName", key: "goodName" },
  { title: "商品价格", dataIndex: "goodPrice", key: "goodPrice" },
  {
    title: "操作",
    dataIndex: "option",
    key: "option",
    slots: { customRender: "option" },
  },
];
/** 微页面表头 */
const pagesThead = [
  { title: "页面id", dataIndex: "pageId", key: "pageId" },
  { title: "页面名称", dataIndex: "pageName", key: "pageName" },
  {
    title: "操作",
    dataIndex: "option",
    key: "option",
    slots: { customRender: "option" },
  },
];
/** 优惠券表头 */
const couponsThead = [
  { title: "优惠券id", dataIndex: "couponId", key: "couponId" },
  { title: "优惠券名称", dataIndex: "couponName", key: "couponName" },
  {
    title: "操作",
    dataIndex: "option",
    key: "option",
    slots: { customRender: "option" },
  },
];

export default defineComponent({
  name: "LinkSelector",
  props: {
    options: {
      type: Object as PropType<ILinkParams>,
      default: () => ({
        visible: false,
        type: LinkType.LINK_GOODS,
      }),
    },
    /** 回调函数 */
    callBack: {
        type: Function as PropType<(e: any)=>void>,
        default: ()=>new Function()
    }
  },
  setup(props, { emit }) {
    /** 点击取消 */
    const handelCancel = () => {
      emit("update:options", {
        visible: false,
        type: "",
      });
    };
    /** 获取modal的数据 */
    const getModalData = computed(() => {
      switch (props.options.type) {
        case LinkType.LINK_PAGE:
          return {
            title: "选择页面",
            tableHead: pagesThead,
            tableData: pageList,
          };
        case LinkType.LINK_COUPON:
          return {
            title: "选择优惠券",
            tableHead: couponsThead,
            tableData: couponList,
          };
        case LinkType.LINK_GOODS:
          return {
            title: "选择商品",
            tableHead: goodsThead,
            tableData: goodsList,
          };
        default:
          return {};
      }
    });
   /** 选择 */
   const selectItem = (e: any)=>{
      props.callBack?.({
          linkType: props.options.type,
          linkId: e.pageId||e.couponId||e.goodId,
          linkName: e.pageName||e.couponName||e.goodName,
          linkPicUrl: e.goodImgUrl||'',
          linkPrice: e.goodPrice||''
      });
      handelCancel()
   }
   return {
      handelCancel,
      getModalData,
      goodsThead,
      pagesThead,
      couponsThead,
      goodsList,
      couponList,
      pageList,
      selectItem
    };
  },
});
</script>

<style lang='scss' scoped>
</style>